<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE组件-父子组件交互-Prop</title>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <child message="我是APP1下的子组件"></child>
        </div>
        <div id="app2">
            <child message="我是APP2下的子组件"></child>
        </div>
    </body>
    <script type="text/javascript">
        // 注册全局组件
        Vue.component('child', {
            // 本组件会用到的属性
            props: ['message'],
            template: '<span>{{message}}</span>'
        });

        // 可以在第一个Vue实例中使用
        new Vue({
            el: '#app1'
        });

        // 也可以在第二个Vue实例中使用
        new Vue({
            el: '#app2'
        });
    </script>
</html>